import React from 'react';
import PropTypes from 'prop-types'
import classnames from 'classnames'
import { Button, Col, AutoComplete, DatePicker, TimePicker, Form, Icon, Input, InputNumber, Row, Select } from 'antd'
import { getTimeDistance } from 'utils'
import moment from 'moment'

const FormItem = Form.Item
const { Option } = Select
const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
  style: {
    marginBottom: 10
  }
}

const Filter = ({
  onFilterChange,
  handleOnChange,
  dimension,
  orderType,
  adAcquireType,
  form: {
    getFieldDecorator,
    getFieldsValue,
    setFieldsValue,
  } }) => {

  const handleSubmit = () => {
    let fields = getFieldsValue()
    let data = {}
    data.wxId = fields.wxId
    if (fields.startDay && fields.startHour) {
      data.start = `${fields.startDay._d.format('yyyy-MM-dd')} ${fields.startHour._d.format('hh:mm:ss')}`
    }
    if (fields.endDay && fields.endHour) {
      data.end = `${fields.endDay._d.format('yyyy-MM-dd')} ${fields.endHour._d.format('hh:mm:ss')}`
    }
    if (fields.dimension === 'orderType') {
      data.orderType = fields.orderType
    } else {
      data.adAcquireType = fields.adAcquireType
    }
    onFilterChange(data)
  }

  const handleFormReset = () => {
    const fields = getFieldsValue()
    fields.startDay = null
    fields.startHour = null
    fields.endDay = null
    fields.endHour = null
    fields.wxId = null
    fields.orderType = null
    if (adAcquireType && adAcquireType.length > 0) {
      fields.adAcquireType = adAcquireType[0].id
    }
    fields.dimension = dimension
    setFieldsValue(fields)
    handleSubmit()
  }

  return (
    <div>
      <Row gutter={24}>
        <Col md={18} sm={24}>
          <FormItem {...formItemLayout} labelCol={{ span: 4 }} label="选择日期">
            <Col span={6} style={{ marginRight: 10 }}>
              <FormItem>
                {getFieldDecorator('startDay')(<DatePicker style={{ width: '100%' }} />)}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem>
                {getFieldDecorator('startHour')(<TimePicker style={{ width: '100%' }} minuteStep={60} format="HH:mm" />)}
              </FormItem>
            </Col>
            <Col span={1}>
              <span style={{ display: 'inline-block', width: '100%', textAlign: 'center' }}>
                -
              </span>
            </Col>
            <Col span={6} style={{ marginRight: 10 }}>
              <FormItem>
                {getFieldDecorator('endDay')(<DatePicker style={{ width: '100%' }} />)}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem>
                {getFieldDecorator('endHour')(<TimePicker style={{ width: '100%' }} minuteStep={60} format="HH:mm" />)}
              </FormItem>
            </Col>
          </FormItem>
        </Col>
        <Col md={6} sm={24}>
          <FormItem {...formItemLayout} label="运营微号">
            {getFieldDecorator('wxId', {
            })(<Input placeholder="请输入" />)}
          </FormItem>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col md={12} sm={24}>
          <FormItem {...formItemLayout} labelCol={{ span: 6 }} label="维度筛选">
            <Col span={11}>
              <FormItem>
                {getFieldDecorator('dimension', { initialValue: dimension })(
                  <Select onChange={handleOnChange} style={{ width: "100%" }} allowClear >
                    <Option value="orderType">订单类别</Option>
                    <Option value="adAcquireType">获客渠道</Option>
                  </Select>,
                )}
              </FormItem>
            </Col>
            <Col span={2}>
              <span style={{ display: 'inline-block', width: '100%', textAlign: 'center' }}>
                -
              </span>
            </Col>
            {dimension === 'adAcquireType' ? (<Col span={11}>
              <FormItem>
                {getFieldDecorator('adAcquireType')(
                  <Select style={{ width: "100%" }} allowClear placeholder="请选择">
                    {adAcquireType.map(item => (<Option value={item.id}>{item.name}</Option>))}
                  </Select>,
                )}
              </FormItem>
            </Col>) :
              (<Col span={11}>
                <FormItem>
                  {getFieldDecorator('orderType')(
                    <Select style={{ width: "100%" }} allowClear placeholder="请选择">
                      {orderType.map(item => (<Option value={item.id}>{item.name}</Option>))}
                    </Select>,
                  )}
                </FormItem>
              </Col>)}
          </FormItem>
        </Col>

        <Col span={8}>
          <div>
            <Button className="margin-right" type="primary" onClick={handleSubmit}>查询</Button>
            <Button className="margin-right" onClick={handleFormReset}>重置</Button>
          </div>
        </Col>
      </Row>
    </div >
  )
}

Filter.propTypes = {
  onFilterChange: PropTypes.func
}
export default Form.create()(Filter)
